<template>
    <div class="search">
        <el-autocomplete clearable class="form" placeholder="请输入医院名称" v-model="hosname" 
        :fetch-suggestions="fetchData"
        :trigger-on-focus="false" 
        @select="goDetail"/>
        <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    </div>

</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { getHospitalInfoAPI } from '@/api/home';
import type { HospitalInfo } from '@/api/home/type';
type AutocompleteFetchSuggestions = (keyword: string, cb: (suggestions: { value: string }[]) => void) => void;
//收集搜索的关键字
let hosname = ref<string>('')
//组件回调
const fetchData:AutocompleteFetchSuggestions = async (keyword: string, cb: any) => {
    // 当用户输入完关键字，函数会执行一次，发请求展示需要展示的数据
    let result:HospitalInfo =await getHospitalInfoAPI(keyword)
    let showData = result.data.map(item=>{
        return {
            value:item.hosname,
            hoscode:item.hoscode
        }
    })
    console.log(result.data);
    cb(showData)
}

let $router = useRouter()
//点击某一个关键词推荐项
const goDetail=(item:any)=>{
    $router.push({path:'/hospital/register'})
}
</script>

<style scoped lang="scss">
.search {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;

    :deep(.el-autocomplete) {
        width: auto;
    }

    ::v-deep .el-input__wrapper {
        width: 600px;
        margin-right: 10px;
    }
}
</style>